<template>
  <div class="classify">
    <div class="head">
      <van-dropdown-menu active-color="#00CECF">
        <van-dropdown-item v-model="value" :options="option" />
        <van-dropdown-item v-model="value" :options="carlevel" />
        <van-dropdown-item title="价格" ref="item">
          <ul>
            <li v-for="(item,index) in price" 
            :key="index" 
            @click="selectPrice(index)" :class="isSelect===index?'selActive':''">{{item}}
            
            </li>
          </ul>
          <div style="padding: 5px 16px;">
            <van-button type="danger" block round color="#00CECF" @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
        <van-dropdown-item>
          <template #title >
           <span>
             全部条件
           </span>
          </template>
        </van-dropdown-item>
      </van-dropdown-menu>
      
    </div>
    <!-- 车辆展示 -->
    <div class="main">
      <van-card
        v-for="item in carinfo"
        :key="item.series_id"
        :title="item.series_name"
        :thumb="item.white_image"
      >
        <template #desc>
          <div class="van-card__desc">{{item.manufacturer_price_range}}</div>
        </template>
        <template #tags>
          <div v-if="item.is_new_energy" class="newenergy">
            <van-tag color="#EBFBFB" text-color="#00CECF">{{item.new_energy_tag[0].text}}</van-tag>
            <van-tag color="#EBFBFB" text-color="#00CECF">{{item.pure_engine_electromotor_cruising}}</van-tag>
          </div>
        </template>
        <template #price>
          <div class="count">{{item.count}}款符合<van-icon name="arrow" /></div>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: '',
  data() {
    return {
      isSelect:0,
      carinfo:[],
      value: 0,
      option: [
        { text: '关注度高', value: 0 },
        { text: '销量高', value: 1 },
        { text: '低价优先', value: 2 },
        { text: '高价优先', value: 3 },
      ],
      price:['不限','5-8万','8-15万','15-20万','20-30万','30-50万','50万以上',],
      carlevel:[
        { text: '轿车', value: 0 },
        { text: 'SUV', value: 1 },
        { text: 'MPV', value: 2 },
        { text: '跑车', value: 3 },
        { text: '其他', value: 4 },
      ],
    }
  },
  async created(){
    await axios.get('http://localhost:9527/classify.json').then(res=>{
      this.carinfo = res.data.Result.series
      console.log(res.data.Result.series);
    })
  },
  methods:{
    selectPrice(index){
      this.isSelect = index
    },
    // 筛选价格
    onConfirm() {
      this.$refs.item.toggle();
      const priceSection = this.price[this.isSelect].split('万')[0].split('-')
     
      console.log(priceSection)
    
    },
  }
}
</script>

<style lang="scss" scoped>

.classify {
  padding-top: 95px;
    .head {
      width: 100%;
      position: fixed;
      top: 45px;
      left: 0;
      z-index: 1;
      ul {
         display: flex;
         justify-content: flex-start;
         flex-wrap:wrap;
         margin-top: 15px;
          li {
          width: 80px;
          border-radius: 5px;
          background: #f8f8fc;
          font-size: 12px;
          line-height: 37px;
          text-align: center;
          color: #000;
          margin-bottom: 10px;
          margin-left: 10px;
        }
      }
      .selActive {
        color: #00D2DC;
        background: #F0FCFC;
      }
    }
}
.classify ::v-deep {
  .van-dropdown-menu__bar {
    box-shadow: none;
  }
  .van-dropdown-menu__bar {
    padding-right: 10px;
    box-sizing: border-box;
  }
  .main {
    .van-card {
        background: #fff;
        padding: 10px 16px;
      .van-card__thumb {
          width: 120px;
      }
      .van-card__title {
        margin-top: 3px;
        font-size: 16px;
        color: #333;
      }
      .van-card__desc {
        font-size: 14px;
        font-weight: 600;
        color: #fd4555;
        margin-top: 5px;
      }
      .van-card__content {
        margin-left: 10px;
      }
      .count {
        font-size: 14px;
        line-height: 14px;
        color: #999;
      }
      .newenergy {
        span {
          margin-right: 5px;
        }
      }
    }
    
  }
}
</style>
